<template>
    <div ref="main" style="width: 600px;height:400px;"></div>
</template>

<script>
import {init} from 'echarts';
export default {
  mounted(){
    var myChart = init(this.$refs.main);
    let option = {
          tooltip: {
              trigger: 'item'
          },
          legend: {
              top: '5%',
              left: 'center'
          },
          series: [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2
                  },
                  label: {
                      show: false,
                      position: 'center'
                  },
                  emphasis: {
                      label: {
                          show: true,
                          fontSize: '40',
                          fontWeight: 'bold'
                      }
                  },
                  labelLine: {
                      show: false
                  },
                  data: [
                      {value: 1048, name: '包'},
                      {value: 735, name: '女鞋'},
                      {value: 1, name: '化妆品'},
                      {value: 1, name: '童装'},
                  ]
              }
          ]
      };

myChart.setOption(option)
  }
};
</script>